<template>
<view class='uni-icon' :style='style' />
</template>

<script setup lang="ts">
  import { IconProps } from '../props'
  import { useIconfont } from '../useIconfont'
  import { computed } from 'vue'
  const props = defineProps(IconProps)
  const {
  colors,
  svgSize,
  quot,
  isStr,
  } = useIconfont(props)
  const style = computed(() => {
      return `background-image: url(${quot.value}data:image/svg+xml, %3Csvg viewBox='0 0 1024 1024' xmlns='http://www.w3.org/2000/svg' width='${svgSize.value}px' height='${svgSize.value}px'%3E%3Cpath d='M856.2176 312.3712h-55.6544v-24.32c0-158.72-129.28-288-288-288S224.5632 129.3312 224.5632 288.0512v23.7056H168.9088c-57.6 0.6144-104.2944 46.6944-104.2944 104.2944v503.6544c0 57.6 46.6944 104.2944 104.2944 104.2944h687.9232c57.6 0 104.2944-46.6944 104.2944-104.2944V416.0512c-0.6144-57.6-47.3088-103.68-104.9088-103.68zM288.5632 288.0512c0-123.4944 100.4544-224 224-224 123.4944 0 224 100.4544 224 224v23.7056h-448v-23.7056zM896.512 919.7056c0 22.4256-17.92 40.2944-40.2944 40.2944H168.9088c-22.4256 0-40.2944-17.92-40.2944-40.2944V416.0512c0-22.4256 17.92-40.2944 40.2944-40.2944h687.9232c21.76 0.6144 39.68 18.5344 39.68 40.2944v503.6544z m0 0' fill='${(isStr.value ? colors.value : colors.value[0]) || 'rgb(51,51,51)'}' /%3E%3Cpath d='M512.5632 544.0512c-17.92 0-32 14.08-32 32v128c0 17.92 14.08 32 32 32s32-14.08 32-32v-128c0-17.92-14.08-32-32-32z m0 0' fill='${(isStr.value ? colors.value : colors.value[1]) || 'rgb(51,51,51)'}' /%3E%3C/svg%3E${quot.value}); width: ${svgSize.value}px; height: ${svgSize.value}px;`
  })
</script>
